<template>
  <div class="app">
    <el-container>
      <el-aside></el-aside>
      <el-main>
        <el-form label-width="80px">
          <el-form-item>
            <el-input id="name" placeholder="账号" v-model="username" ref="name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input id="word" placeholder="密码" v-model="password" ref="word" show-password></el-input>
          </el-form-item>
        </el-form>
        <el-row>
          <el-button @click="login">登录</el-button>
        </el-row>
        <el-row class="fflex">
          <el-link type="primary" @click="reguser">注册</el-link>
          <!-- <el-link type="primary">重置密码</el-link> -->
        </el-row>
      </el-main>
    </el-container>
    <router-view></router-view>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";

import * as types from "@/store/types.js";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  //添加监听回车按键
  created() {
    var _this = this;
    document.addEventListener("keydown", _this.watchEnter);
  },
  destroyed() {
    //移除监听回车按键
    var _this = this;
    document.removeEventListener("keydown", _this.watchEnter);
  },
  methods: {
    //监听回车按钮事件
    watchEnter(e) {
      var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值
      if (keyNum == 13) {
        this.login();
      }
    },

    login() {
      let data = {
        username: this.username,
        password: this.password,
      };

      axios({
        method: "post",
        url: "http://localhost:8081/api/login",
        data: qs.stringify({ ...data }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }).then((res) => {
        // 账号密码正确可以跳转页面，需要向外导出token
        if (res.data.status == 0) {
          this.$notify({
            title: "登录成功",
            offset: 60,
            type: "success",
            showClose: false,
          });
          this.$store.commit(types.LOGIN, [res.data.token, res.data.username]);
          this.$router.push({
            path: "/home",
          });
        } else {
          this.$notify.error({
            title: "登录失败",
            message: "账号或密码错误，请重新输入",
            offset: 60,
            showClose: false,
          });
        }
      });
    },
    reguser() {
      this.$router.push({ path: "/register" });
    },
  },
};
</script>

<style lang="less" scoped>
.app {
  background: linear-gradient(-45deg, #5bb0ff, #c59cff);
  position: absolute;
  height: 100%;
  width: 100%;

  .el-container {
    margin: 5rem auto;
    width: 30rem;
    height: 17rem;
    // border: 1px solid red;
    border-radius: 0.5rem;

    .el-aside {
      float: left;
      width: 9rem !important;
      background-image: url(../../../public/img/3.jpg);
      background-repeat: no-repeat;
      background-size: auto 100%;
      border-top-left-radius: 0.5rem;
      border-bottom-left-radius: 0.5rem;
    }

    .el-main {
      margin: 0;
      padding: 0;
      float: left;
      width: 20rem;
      background-color: #e3e5fe;
      border-top-right-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;

      // scoped情况下修改子组件的样式
      .el-input /deep/ .el-input__inner {
        background-color: #e3e5fe;
        border-radius: 0;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid rgba(54, 54, 192, 0.2);
      }

      .el-form-item {
        padding-top: 1rem;
        width: 17.5rem;
      }

      .el-button {
        // position: absolute;
        background-color: rgb(211, 250, 255);
        width: 6.3rem;
        left: 50%;
        margin-top: 1.35rem;
        margin-left: 7rem;
        border: none;
        cursor: pointer;
        color: #e7acff;
      }

      .el-button:hover {
        color: rgb(227, 136, 255);
      }

      .fflex {
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .el-link {
          margin-top: -20px;
          height: 0.9375rem;
          color: #68f0b7;
        }
      }
    }
  }
}
</style>
